<template>
    <view class="relative">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="分销订单"  navbarType='5'></wlk-navbar>
        <view class="order-content relative pd030" :style="{background:bgColor}">
            <u-gap height="40"></u-gap>
            <view class="order-card bgw mt40 relative overHidden shadow br08 pd30"  :style="{background:cardColor}">
                <view class="wlkflex justify-between ">
                    <view>
                        <view class="order-num bold center">{{agentInfo.order_count||0}}</view>
                        <view class="title center mt15">团队订单量(单)</view>
                    </view>
                    <view>
                        <view class="order-num bold center">{{agentInfo.order_count_1||0}}</view>
                        <view class="title center mt15">一级订单量(单)</view>
                    </view>
                    <view>
                        <view class="order-num bold center">{{agentInfo.order_count_2||0}}</view>
                        <view class="title center mt15">二级订单量(单)</view>
                    </view>
                </view>
                <view class="solid"></view>
                <view class="wlkflex justify-between ">
                    <view>
                        <view class="order-num bold center">{{agentInfo.order_money||0}}</view>
                        <view class="title center mt15">团队订单额(元)</view>
                    </view>
                    <view>
                        <view class="order-num bold center">{{agentInfo.order_money_1||0}}</view>
                        <view class="title center mt15">一级订单额(元)</view>
                    </view>
                    <view>
                        <view class="order-num bold center">{{agentInfo.order_money_2||0}}</view>
                        <view class="title center mt15">二级订单额(元)</view>
                    </view>
                </view>
            </view>
            <view class="tab-box">
                <u-tabs
                        :activeStyle="{
                        fontSize: '28rpx',
                        fontWeight: 'bold',
                        transform: 'scale(1.05)'
                    }"
                        :itemStyle="{
                         height: '35px',
                         alignItems:'flex-start',
                         padding:'0 0',
                    }"
                        :inactiveStyle="{
                        color: '#646566',
                        fontSize: '28rpx',
                        transform: 'scale(1)'
                    }"
                        lineWidth="25"
                        :current="curNow"
                        :lineColor="themeColor"
                        :scrollable="false"
                        :list="tabList" @click="changeTab"></u-tabs>
            </view>
        </view>
        <view>
            <scroll-view class="order-list pd30" :style="{height:itemHeight}" scroll-y @scrolltolower="scrolltolower">
                <block v-if="loadStatus=='nomore' && orders.length==0">
                    <view class="not-data">
                        <u-empty
                                :icon="uEmpty.order"
                                text="没有订单记录"
                        >
                        </u-empty>
                    </view>
                </block>
                <block v-else>
                    <view v-for="(order,index) in orders" class="order-item mb30 pd30 br08">
                        <view class="wlkflex justify-between wd100">
                            <view><text class="desc">订单编号：</text> <text>{{order.orderInfo.order_sn}}</text></view>
                            <view>
                                <u--text type="warning" v-if="order.orderInfo.status=='0'" align="right" size="14" :text="order.orderInfo.status_text"></u--text>
                                <u--text type="info" v-if="order.orderInfo.status<'0'" align="right" size="14" :text="order.orderInfo.status_text"></u--text>
                                <u--text type="error" v-if="order.orderInfo.status>'0'" align="right" size="14" :text="order.orderInfo.status_text"></u--text>
                            </view>
                        </view>
                        <u-divider></u-divider>
                        <view class="wlkflex justify-between">
                            <view class="wlkflex userInfo">
                                <view class="desc">下单人：</view>
                                <u-avatar size="30" :src="order.userInfo.avatar"></u-avatar>
                                <view class="nickname ml15 u-line-1">{{order.userInfo.nickname}}</view>
                            </view>
                            <view class="createtime">
                                {{$u.timeFormat(order.orderInfo.createtime,'yyyy/mm/dd hh:MM:ss')}}
                            </view>
                        </view>
                        <view class="order-info mt30 wlkflex justify-between wd100 align-start">
                            <view class="o-info-img br04 overHidden">
                                <image class="wd100 hg100" lazy-load :src="order.orderInfo.line_info.images[0]"  mode="aspectFill"/>
                            </view>
                            <view class="o-info-main">
                                <view class="o-main-title u-line-2">
                                    {{order.orderInfo.line_info.title}}
                                </view>
                                <view class="o-main-desc u-line-1 mt10">
                                    {{order.orderInfo.line_info.desc}}
                                </view>
                                <view class="o-main-price u-line-1 mt20">
                                    ¥<text class="ml05">{{order.orderInfo.total_fee}}</text>
                                </view>
                            </view>
                        </view>
                        <u-divider></u-divider>
                        <view class="wlkflex justify-between wd100">
                            <view><text class="desc">佣金：</text> <text class="money">¥ <text class="ml05">{{order.money}}</text></text></view>
                            <view>
                                <u--text type="warning" v-if="order.status=='0'" align="right" size="14" :text="order.status_text"></u--text>
                                <u--text type="info" v-if="order.status<'0'" align="right" size="14" :text="order.status_text"></u--text>
                                <u--text type="error" v-if="order.status>'0'" align="right" size="14" :text="order.status_text"></u--text>
                            </view>
                        </view>
                    </view>
                    <view class="load-more">
                        <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                    </view>
                </block>
            </scroll-view>
        </view>
        <view class="bg-icon">
            <image class="wd100 br04":src="images.texture"  mode="widthFix"/>
        </view>
    </view>
</template>
<script>
    var _self;
    import {rgbaToRgb,toUrl} from '@/wlkutils/tools';
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin','images','uEmpty'])
        },
        data() {
            return {
                bgColor:'',
                cardColor:'',
                agentInfo:{},
                orders:[],
                itemHeight:'',
                systemInfo : uni.getSystemInfoSync(),
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
                tabList:[
                    {
                        status: 'all',
                        name: '全部',
                    },
                    {
                        status: '1',
                        name: '已入账',
                    },
                    {
                        status: '0',
                        name: '待入账',
                    },
                    {
                        status: '-1',
                        name: '已取消',
                    },
                ],
                curNow: 0,
            };
        },
        onLoad() {
            _self = this;
            this.bgColor = ' linear-gradient(to bottom,'+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.2)+' ,'+ uni.$u.colorToRgba('#FFFFFF', 1)+')';
            this.cardColor = 'linear-gradient(to right,'+this.themeColor+' ,'+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.65)+')';
            this.itemHeight =  uni.$u.addUnit(this.systemInfo.windowHeight*0.7, 'px');
            this.getData();
        },
        onShow() {

        },
        watch:{
            isLogin(val) {
                if(val){
                    _self.getData();
                }
            },
            themeColor(val) {
                this.bgColor = ' linear-gradient(to bottom,'+ uni.$u.colorToRgba(rgbaToRgb(val), 0.2)+' ,'+ uni.$u.colorToRgba(rgbaToRgb('#FFFFFF'), 1)+')';
                this.cardColor = 'linear-gradient(to right,'+val+' ,'+ uni.$u.colorToRgba(rgbaToRgb(val), 0.65)+')';
            }
        },
        methods: {
            scrolltolower() {
                if(this.loadStatus == "nomore"){
                    return;
                }
                this.page++;
                this.getData();
            },
            getData(){
                uni.$u.http.post('commission/getOrder', {
                    page: this.page,
                    status:this.tabList[this.curNow].status,
                }).then(res => {
                    this.agentInfo = res.data.agentInfo;
                    if (res && res.data && res.data.orders) {
                        this.orders = this.orders.concat(res.data.orders);
                    }
                    this.loadStatus = res.data.orders.length < res.data.limit ? 'nomore' : 'loadmore';
                }).catch(res => {
                })

            },
            jump(path){
                toUrl(path);
            },
            changeTab(v){
                this.curNow = v.index;
                this.init()
            },
            init(){
                this.loadStatus = 'loading';
                this.page = 1;
                this.orders = [];
                this.getData();
            }

        }
    }
</script>
<style lang="scss">
   page{
       .order-content{
           /* #ifdef MP-WEIXIN */
           padding-top: 120rpx;
           /* #endif */
           /* #ifdef H5 */
           padding-top: 50rpx;
           /* #endif */
           .order-card{
               width: 100%;
               margin: 0 auto;
               color: #FFFFFF;
              .team-num{
                  font-size: $font-max;
              }
              .title{
                  font-size: $font-sm;
                  color: rgba(255,255,255,.8);
              }
              .solid{
                  background-color: rgba(255,255,255,.2);
                  width: 100%;
                  height: 4rpx;
                  margin: 20rpx 0;
              }
              .wallet-title{
                  font-size: $font-sm;
                  color: #FFFFFF;
              }

           }
           .tab-box{
               margin-top: 40rpx;
           }
       }

       .order-list{
           height: 70%;
           background-color: $uni-bg-color-grey;
           .order-item{
               font-size: $font-base;
               background-color: #FFFFFF;
               .desc{
                   color: $uni-text-color-grey;
               }
               .userInfo{
                   width: 55%;
                   .desc{
                       width: 118rpx;
                   }
                   .nickname{
                       width: 48%;
                   }
               }
               .createtime{
                   font-size: $font-sm;
                   width: 40%;
                   color: $uni-text-color-grey;
                   text-align: right;
               }
               .order-info{
                   .o-info-img{
                       width: 185rpx;
                       height:  185rpx;
                       text-align: center
                   }
                   .o-info-main{
                       width: 68%;
                       .o-main-title{
                           font-size: $font-lt;
                           font-weight: bold;
                       }
                       .o-main-desc{
                           font-size: $font-sm;
                           color: $uni-text-color-grey;
                       }
                       .o-main-price{
                           font-size: $font-base;
                           color: $-tour-price-color;
                       }
                   }
               }
               .money{
                   font-size: $font-base;
                   color: $-tour-price-color;
               }
           }
       }
       .bg-icon{
           position: absolute;
           z-index: -1;
           top: -220rpx;
           right: -220rpx;
           width: 100%;
           height: 700rpx;
           opacity: .1;
           overflow: hidden;
       }

   }
</style>
